<template>
  <div ref="myChartRef" :style="{width: props.width, height: props.height}"></div>
</template>
<script lang="ts" setup>
import * as echarts from "echarts"
import {onMounted, defineProps, watch, onUpdated, ref} from "vue"
const props = defineProps<{
  option: echarts.EChartsOption
  width: string
  height: string
}>()
const myChart = ref()
const myChartRef = ref()
onMounted(() => {
  myChart.value = echarts.init(myChartRef.value)
  props.option && myChart.value.setOption(props.option)
})
onUpdated(() => {
  props.option && myChart.value.setOption(props.option)
})
</script>
<style scoped lang="scss"></style>
